mui.init()
mui.ready(function () {
	/*全局变量,当前tab页标记*/
	var curTabPage;
	var editState = {
		child: false,
		parent: false
	};
	
	/*div滚动初始化*/
	var options = {deceleration:0.0006}
	var scroll = mui('.mui-scroll-wrapper').scroll(options);
	if (document.querySelector('.insureInfo')) {
		document.querySelector('.insureInfo').addEventListener('scroll', function () {
			if (!document.querySelector('.tabs')) {
				return
			}
			var tabs = document.querySelector('.tabs')
			if (scroll.y <= -tabs.offsetTop) {
				document.querySelector('.tabs').style = 'transform: translate3d(0px, ' + (-scroll.y - (tabs.offsetTop + 10)) + 'px, 0px) translateZ(0px); transition-duration: 0ms;'
			} else {
				document.querySelector('.tabs').style = '';
			}
		})
	}
	
	
	/*获取动画keyframe状态的对象*/
  function getRule() {
      var rule;
      var ss = document.styleSheets;
      for (var i = 0; i < ss.length; ++i) {
          for (var x = 0; x < ss[i].cssRules.length; ++x) {
              rule = ss[i].cssRules[x];
              if (rule.name == "fold" && rule.type == CSSRule.KEYFRAMES_RULE) {
                  return rule;
              }
          }
      }
  }
	/*返回按钮点击执行逻辑*/
	document.getElementById('goBack').addEventListener('tap', function () {
		window.history.go(-1)
	})
	
	/*展开收起效果逻辑*/
	function foldInit () {
		var unfoldList = document.querySelectorAll(
			'.unfold > header.titleH > span.mui-icon, .unfold > header.titleH span.mui-icon, .unfold header.secondTitle > span.mui-icon'
			);
		for (var item = 0; item < unfoldList.length; item++) {
			unfoldList[item].addEventListener('tap', function () {
				
				var el = this.parentNode.tagName === 'HEADER' ? this.parentNode.nextElementSibling : this.parentNode.parentNode.nextElementSibling
				var elHeight = getComputedStyle(el, null).height
				
				if (elHeight === '0px') {
					var elStyleHeight = el.style.height;
					var rule = getRule()
					rule.appendRule("100% { height: " + elStyleHeight + "px}");
					this.className = 'mui-icon mui-icon-arrowup'
					el.className = 'infoList animation-fold'
				} else {
					el.style.height ? "" : el.style.height = elHeight;
					this.className = 'mui-icon mui-icon-arrowdown'
					el.className = 'infoList animation-unfold'
				}
				
				if (this.parentNode.className === 'secondTitle') {
					this.parentNode.parentNode.style = ''
				}
			})
		}
		
		var lis = document.querySelectorAll('.infoItem .checkbox + span .mui-icon');
		for (var li = 0; li < lis.length; li++) {
			lis[li].addEventListener('tap', function () {
				var el = this.parentNode.parentNode.nextElementSibling
				var elHeight = getComputedStyle(el, null).height
				if (elHeight === '0px') {
					var elStyleHeight = el.style.height;
					var rule = getRule()
					this.className = 'mui-icon mui-icon-arrowup'
					el.className = 'infoList animation-fold'
				} else {
					el.style.height ? "" : el.style.height = elHeight;
					this.className = 'mui-icon mui-icon-arrowdown'
					el.className = 'infoList animation-unfold'
				}
			})
		}
	}
	foldInit ()
	
	/*tabs组件效果逻辑封装*/
	function tabInit (el, callback) {
		var i = document.createElement('i');
		var tabs = el;
		var tabsContentList = tabs.parentNode.querySelectorAll('.tabChild');
		var curTab = tabs.querySelector('span:first-child');
		var curTabName = curTab.getAttribute('name');
		var curTabContent = document.getElementById(curTabName);
		curTabPage = curTabName;
		tabs.appendChild(i);
		
		for (var child = 0; child < tabsContentList.length; child++) {
			tabsContentList[child].style.display = 'none'
		}
		curTab.className = 'ue-active';
		curTabContent.style.display = 'block';
		
		/*绑定点击事件*/
		function tabChange (event) {
			var el = event.target;
			var spans = el.parentNode.querySelectorAll('span[name]');
			var rect = el.getBoundingClientRect();
			curTab = el;
			curTabName = curTab.getAttribute('name');
			curTabContent = document.getElementById(curTabName);
			
			for (var span = 0; span < spans.length; span++) {
				spans[span].className = ''
			}
			for (var child = 0; child < tabsContentList.length; child++) {
				tabsContentList[child].style.display = 'none'
			}
			el.className = 'ue-active';
			curTabContent.style.display = 'block';
			this.querySelector('i').style.transition = 'all .3s ease'
			this.querySelector('i').style.left = rect.x + 'px'
			this.querySelector('i').style.width = rect.width + 'px'
			
			callback(curTabName)
		}
		tabs.addEventListener('click', tabChange);
		tabs.addEventListener('tap', tabChange)
	}
	
	/*tab组件初始化调用*/
	if (document.querySelector('.tabs')) {
		tabInit(document.querySelector('.tabs'), function (curTabName) {
			/*点击标签页回调函数逻辑*/
			//	mui('.insureInfo').scroll().scrollTo(0,0,100);
			curTabPage = curTabName
			
			if (curTabPage === 'children' && !editState.child || curTabPage === 'parent' && !editState.parent) {
				document.getElementById('management').style.display = 'block'
				document.getElementById('finished').style.display = 'none'
			} else if (curTabPage === 'children' && editState.child || curTabPage === 'parent' && editState.parent) {
				document.getElementById('finished').style.display = 'block'
				document.getElementById('management').style.display = 'none'
			}
		})
	}
	
	
	/*点击添加父母/子女按钮执行逻辑*/
	function addPerson () {
		var parent = document.getElementById('parent');
		var children = document.getElementById('children');
		var html = document.getElementById('childrenHTML').innerHTML;
		var temp = document.createElement('div');
		
		
		if (this.id === 'addChild') {
			temp.className = 'child';
			temp.innerHTML = html;
			
			children.insertBefore(temp, this.parentNode.parentNode);
			var count = document.querySelectorAll('.child').length;
			document.querySelectorAll('.child .addPerson')[count - 1].innerHTML = '子女' + count;
		} else if (this.id === 'addParent') {
			temp.className = 'parent';
			temp.innerHTML = html;
			
			parent.insertBefore(temp, this.parentNode.parentNode);
			var count = document.querySelectorAll('.parent').length;
			document.querySelectorAll('.parent .addPerson')[count - 1].innerHTML = '父母' + count;
		}
		
		foldInit()
	}
	/*绑定添加人员按钮事件*/
	document.querySelector('#addChild') ? document.querySelector('#addChild').addEventListener('tap', addPerson) : '';
	document.querySelector('#addParent') ? document.querySelector('#addParent').addEventListener('tap', addPerson) : '';
	
	/*删除人员按钮事件*/
	function deletePerson () {
		var deleteList = document.querySelectorAll('.titleName .mui-icon');
		for (var i = 0; i < deleteList.length; i++) {
			deleteList[i].addEventListener('tap', function () {
				this.parentNode.parentNode.parentNode.parentNode.remove();
			})
		}
	}
	
	/*点击管理按钮*/
	document.querySelector('#management') ? document.querySelector('#management').addEventListener('tap', function () {
		document.getElementById('finished').style.display = 'block';
		this.style.display = 'none';
		
		if (curTabPage === 'children') {
			editState.child = true
			var childList = document.querySelectorAll('.child .titleName .mui-icon');
			
			document.querySelector('#addChild').disabled = true
			for (var i = 0; i < childList.length; i++) {
				childList[i].style.display = 'inline-block';
			}
			/*删除按钮绑定事件*/
			deletePerson()
		} else if (curTabPage === 'parent') {
			editState.parent = true
			var childList = document.querySelectorAll('.parent .titleName .mui-icon');
			
			document.querySelector('#addParent').disabled = true
			for (var i = 0; i < childList.length; i++) {
				childList[i].style.display = 'inline-block';
			}
			/*删除按钮绑定事件*/
			deletePerson()
		}
	}) : ''
	
	/*点击完成按钮*/
	document.querySelector('#finished') ? document.querySelector('#finished').addEventListener('tap', function () {
		document.getElementById('management').style.display = 'block';
		this.style.display = 'none';
		
		if (curTabPage === 'children') {
			editState.child = false
			var childList = document.querySelectorAll('.child .titleName .mui-icon');
			
			document.querySelector('#addChild').disabled = false
			for (var i = 0; i < childList.length; i++) {
				childList[i].style.display = 'none';
			}
		} else if (curTabPage === 'parent') {
			editState.parent = false
			var childList = document.querySelectorAll('.parent .titleName .mui-icon');
			
			document.querySelector('#addParent').disabled = false
			for (var i = 0; i < childList.length; i++) {
				childList[i].style.display = 'none';
			}
		}
	}) : ''
	
	/*点击上一步下一步*/
	document.querySelector('#nextType') ? document.querySelector('#nextType').addEventListener('tap', function () {
		if (curTabPage === 'parent') {
			var pathArr = location.pathname.split('/');
			pathArr[pathArr.length - 1] = 'healthNotification.html';
			location.href = location.protocol + '//' +location.host + pathArr.join('/');
		} else {
			var nextTab = document.querySelector('.tabs span[name="' + curTabPage + '"]').nextElementSibling;
			nextTab.click()
		}
	}) : ''
	document.querySelector('#lastType') ? document.querySelector('#lastType').addEventListener('tap', function () {
		if (curTabPage === 'employee') {
			return
		} else {
			var lastTab = document.querySelector('.tabs span[name="' + curTabPage + '"]').previousElementSibling;
			lastTab.click()
		}
	}) : ''
	
	/*点击提交按钮*/
	document.getElementById('submit') ? document.getElementById('submit').addEventListener('tap', function () {
		var pathArr = location.pathname.split('/');
		pathArr[pathArr.length - 1] = 'insureInfoIsSure.html';
		location.href = location.protocol + '//' +location.host + pathArr.join('/');
	}) : '';
})